<template>
	<view class="">
		<Header title="个人信息" :showBack="true"></Header>
	
	<view class="person-info">
			
		<view class="form-box">
			<com-input label="头像" notInput>
				<view slot="text" class="flex flex_center justify_end" @click="showImgFn">
					<image class="slot-image" :src="userInfo.pic"></image>
					<uni-icons class="right-icon" type="arrowright"></uni-icons>
				</view>
			</com-input>
			<com-input label="姓名" v-model="userInfo.name"></com-input>
			<com-input label="联系电话" v-model="userInfo.mobile"></com-input>
			<com-input label="个性签名" v-model="userInfo.remark" type="textarea"></com-input>
		</view>
		<button class="common-btn" type="primary" @click="saveFn">保存</button>
	</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import comInput from '@/components/com-input/com-input.vue';
	import Header from '@/components/header.vue'
	export default {
		components: {
			comInput,
			Header
		},
		computed: {
		  ...mapState(['uid', 'uploadUrl'])
		},
		data() {
			return {
				userInfo: {}
			}
		},
		onShow() {
		  if (this.uploadUrl) {
			  this.userInfo.pic = this.uploadUrl
		  }
		},
		onLoad() {
			this.userInfo = this.$store.state.userInfo
		},
		methods: {
			// 查看头像
			showImgFn() {
				uni.navigateTo({
					url: './personImg'
				})
			},
			
			// 保存
			saveFn(e) {
				
				if(this.uploadUrl == ''){
					this.updateUser();
				}else{
					uni.uploadFile({
						  url: 'http://lingdian.h8m.cn/index.php/api/user/upload',
						  filePath: this.userInfo.pic,
						  name: 'pic',
						  success: (uploadFileRes) => {
							  this.userInfo.pic = uploadFileRes.data;
							  this.updateUser();
							  // this.updateUser()
						  }
					});
				}
				
				
				
			},
			async updateUser () {
				let that = this;
				let userInfo = encodeURIComponent(JSON.stringify(this.userInfo));
				const res = await that.http.httpRequest('/user/updateUser','post',{userInfo:userInfo, uid: this.uid})
			    if (res.data.code == 1) {
					this.$u.toast('更新用户信息成功')
					this.$store.commit('setUploadUrl', '')
					this.$store.dispatch('getUserInfo')
					setTimeout(function() {
						uni.navigateTo({
							url: 'pages/my/my'
						})
					}, 1000);
				} else{
					this.$u.toast('更新用户信息失败')
				}	
			}
		}
	}
</script>

<style lang="scss" scoped>
.person-info {
	.list {
		padding: 20upx;
		border-top: 10px solid #F7F7F7;
	}
	.slot-image {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}
}
</style>
